<template>
  <div class="app-container">
    <div class="title-flex">
      <div>人员列表</div>
      <div>
        <el-button-group class="ml-4">
          <el-button type="primary" @click="adddialogFormVisible"> 新增</el-button>
          <el-button type="primary" @click="ExportBtn()"> 导出</el-button>
          <el-button type="primary" > 导入</el-button>
        </el-button-group>
      </div>
    </div>
    <div>
      <el-tabs v-model="activeName" type="border-card" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane :label="ALLs.name + '(' + ALLs.count + ')' " :obj="ALLs" :name="0"></el-tab-pane>
        <el-tab-pane :label="schooolGo.name + '(' + schooolGo.count + ')' " :obj="schooolGo" :name="2"></el-tab-pane>
        <el-tab-pane :label="schooolBack.name + '(' + schooolBack.count + ')' " :obj="schooolBack" :name="3"></el-tab-pane>
        <el-tab-pane :label="waiting.name + '(' + waiting.count + ')' " :obj="waiting" :name="1"></el-tab-pane>
      </el-tabs>
      <component @GetprocessCount="getprocessCount" :is="researcherTableComponent" :state="state" ref="getChildlist"></component>
    </div>
    <el-dialog v-model="dialogFormVisible" title="新增" width="70%">
      <div>
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
        >
          <div class="dialog-flex">
            <div>
              <el-form-item label="姓名" prop="name">
                <el-input v-model="ruleForm.name" />
              </el-form-item>
              <el-form-item label="职工号" prop="account">
                <el-input v-model="ruleForm.account" />
              </el-form-item>
              <el-form-item label="性别" prop="sexId">
                <el-radio-group v-model="ruleForm.sexId">
                  <el-radio label="男" value="1" />
                  <el-radio label="女" value="0" />
                </el-radio-group>
              </el-form-item>
              <el-form-item label="人事单位" prop="hrUnitId">
                <el-select @focus="getrenshidanweiOptions" v-model="ruleForm.hrUnitId" placeholder="请选择人事单位">
                  <el-option
                      v-for="item in renshidanweiOptions"
                      :key="item.codeColumn"
                      :label="item.valueColumn"
                      :value="item.codeColumn"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="所属单位" prop="unitId">
                <el-select @focus="getshuoshudanweiOptions" v-model="ruleForm.unitId" placeholder="请选择所属单位">
                  <el-option
                      v-for="item in shuoshudanweiOptions"
                      :key="item.codeColumn"
                      :label="item.valueColumn"
                      :value="item.codeColumn"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="职称" prop="titleId">
                <el-select @focus="getzhichengOptions" v-model="ruleForm.titleId" placeholder="请选择职称">
                  <el-option
                      v-for="item in zhichengOptions"
                      :key="item.codeColumn"
                      :label="item.valueColumn"
                      :value="item.codeColumn"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="科学研究领域" prop="searchClassId">
                <el-select @focus="getkexueyanjiuOptions" v-model="ruleForm.searchClassId" placeholder="请选择科学研究领域">
                  <el-option
                      v-for="item in kexueyanjiuOptions"
                      :key="item.codeColumn"
                      :label="item.valueColumn"
                      :value="item.codeColumn"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="一级学科" prop="searchId">
                <el-select
                    v-model="ruleForm.searchId"
                    placeholder="请选择一级学科"
                    @focus="getyijixuekeOptions"
                >
                  <el-option
                      v-for="item in yijixuekeOptions"
                      :key="item.id"
                      :label="item.label"
                      :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="职称级别" prop="titleRank">
                <el-radio-group v-model="ruleForm.titleRank">
                  <el-radio label="正高级" value="ZGJ" />
                  <el-radio label="副高级" value="FGJ" />
                  <el-radio label="中级" value="ZJ" />
                  <el-radio label="初级" value="CJ" />
                  <el-radio label="无" value="QT" />
                </el-radio-group>
              </el-form-item>
              <el-form-item label="最后学位" prop="eduDegreeId">
                <el-radio-group v-model="ruleForm.eduDegreeId">
                  <el-radio label="博士" value="2" />
                  <el-radio label="硕士" value="3" />
                  <el-radio label="学士" value="4" />
                  <el-radio label="无" value="999" />
                </el-radio-group>
              </el-form-item>
              <el-form-item label="最后学历" prop="eduLevelId">
                <el-radio-group v-model="ruleForm.eduLevelId">
                  <el-radio label="博士研究生" value="0" />
                  <el-radio label="硕士研究生" value="1" />
                  <el-radio label="本科" value="2" />
                  <el-radio label="大专" value="3" />
                  <el-radio label="中专" value="4" />
                  <el-radio label="其他" value="5" />
                </el-radio-group>
              </el-form-item>
              <el-form-item label="在职情况" prop="personState">
                <el-radio-group v-model="ruleForm.personState">
                  <el-radio label="在职" value="1" />
                  <el-radio label="退休" value="2" />
                  <el-radio label="离职" value="3" />
                </el-radio-group>
              </el-form-item>
              <el-form-item label="是否统计" prop="isStat">
                <el-radio-group v-model="ruleForm.isStat">
                  <el-radio label="统计" value="1" />
                  <el-radio label="不统计" value="0" />
                </el-radio-group>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="政治面貌" :label-width="formLabelWidth">
                <el-select @focus="getzhengzhimianmaoOptions" v-model="ruleForm.polityId" placeholder="请选择政治面貌">
                  <el-option
                      v-for="item in zhengzhimianmaoOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="杰出人才" :label-width="formLabelWidth">
                <el-checkbox-group v-model="ruleForm.honorTitleId">
                  <el-checkbox label="院士" value="1" name="type" />
                  <el-checkbox label="突出青年" value="2" name="type" />
                  <el-checkbox label="长江学者" value="3" name="type" />
                  <el-checkbox label="其他" value="4" name="type" />
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="硕导/博导" :label-width="formLabelWidth">
                <el-radio-group v-model="ruleForm.tutorTypeId">
                  <el-radio label="博导" value="1" />
                  <el-radio label="硕导" value="2" />
                  <el-radio label="非导师" value="3" />
                </el-radio-group>
              </el-form-item>
              <el-form-item label="英文名" :label-width="formLabelWidth">
                <el-input v-model="ruleForm.nameEn" autocomplete="off" />
              </el-form-item>
              <el-form-item label="电子邮件" :label-width="formLabelWidth" prop="email">
                <el-input v-model="ruleForm.email" autocomplete="off" />
              </el-form-item>
              <el-form-item label="手机号" :label-width="formLabelWidth" prop="mobile">
                <el-input v-model="ruleForm.mobile" autocomplete="off" />
              </el-form-item>
              <el-form-item label="办公电话" :label-width="formLabelWidth" prop="telOffice">
                <el-input v-model="ruleForm.telOffice" autocomplete="off" />
              </el-form-item>
              <el-form-item label="出生年月" :label-width="formLabelWidth">
                <el-date-picker
                    v-model="ruleForm.birthday"
                    type="date"
                    format="YYYY/MM/DD"
                    value-format="YYYY-MM-DD"
                    aria-label="选择时间"
                    placeholder="选择时间"
                />
              </el-form-item>
              <el-form-item label="身份证号/护照号" :label-width="formLabelWidth">
                <el-input v-model="ruleForm.idCard" autocomplete="off" />
              </el-form-item>
              <el-form-item label="毕业院校" :label-width="formLabelWidth">
                <el-input v-model="ruleForm.graduateSchool" autocomplete="off" />
              </el-form-item>
              <el-form-item label="研究方向" :label-width="formLabelWidth">
                <el-input v-model="ruleForm.researchField" type="textarea" />
              </el-form-item>
            </div>
          </div>
          <div>
            <el-form-item label="教育经历" :label-width="formLabelWidth">
              <el-input v-model="ruleForm.learnSpecialty" type="textarea" />
            </el-form-item>
            <el-form-item label="出国经历" :label-width="formLabelWidth">
              <el-input v-model="ruleForm.experienceAbroad" type="textarea" />
            </el-form-item>
            <el-form-item label="进修培训情况" :label-width="formLabelWidth">
              <el-input v-model="ruleForm.learning" type="textarea" />
            </el-form-item>
            <el-form-item label="学术及社会兼职" :label-width="formLabelWidth">
              <el-input v-model="ruleForm.parttime" type="textarea" />
            </el-form-item>
          </div>
          <!-- 修改了这里的样式 -->
          <div class="dialog-button-container">
            <el-form-item>
              <el-button style="text-align: center" type="primary" @click="submitForm(ruleFormRef, '-1')">
                暂存
              </el-button>
              <el-button v-if="verifyRoleType.isKyms()" style="text-align: center" type="primary" @click="submitForm(ruleFormRef, '1')">
                提交
              </el-button>
              <el-button v-if="verifyRoleType.iskycgly()" style="text-align: center" type="primary" @click="submitForm(ruleFormRef, '2')">
                保存并通过
              </el-button>
              <el-button style="text-align: center" @click="resetForm(ruleFormRef)">关闭</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { verifyRoleType } from "@/utils/main";
import { DrawerProps, ElMessage, ElMessageBox } from "element-plus";
import { getCategory, processCount, insertPersonList } from "@/api/researcherNavApi/researcherNavApi";
import researcherTable from './researcherTable.vue';
import { onBeforeMount, onMounted, ref, watch, computed } from "vue";

// 动态返回 researcherTable 组件
const researcherTableComponent = computed(() => researcherTable);
const drawer = ref(false); //更多在弹出
const direction = ref<DrawerProps['direction']>('rtl');
const radio1 = ref('Option 1');

//导出
const ExportBtn = function () {
  getChildlist.value.Export();
};

const state = ref('');
const activeName = ref(0);

function cancelClick() {
  drawer.value = false;
}

function confirmClick() {
  ElMessageBox.confirm(`Are you confirm to chose ${radio1.value} ?`)
      .then(() => {
        drawer.value = false;
      })
      .catch(() => {
        // catch error
      });
}

interface User {
  id: number;
  date: string;
  name: string;
  address: string;
}

const handleClick = (tab, event) => {
  state.value = tab.props.name;
  // console.log(tab.props.name)
  // console.log(tab.props)
  // getChildlist.value.fathergeilist()
};

// 编辑
const dialogFormVisible = ref(false);

//职称
const zhichengOptions = ref([]);
const getzhichengOptions = function () {
  //职称
  getCategory({
    'bizName': '职称单选'
  })
      .then((res) => {
        zhichengOptions.value = res.data;
      });
};

//一级学科
const yijixuekeOptions = ref([]);
const getyijixuekeOptions = function () {
  getCategory({
    'bizName': '一级学科'
  })
      .then((res) => {
        yijixuekeOptions.value = res.data;
      });
};

//所属单位
const shuoshudanweiOptions = ref([]);
const getshuoshudanweiOptions = function () {
  getCategory({
    'bizName': '成果归属单位'
  })
      .then((res) => {
        shuoshudanweiOptions.value = res.data;
      });
};

//人事单位
const renshidanweiOptions = ref([]);
const getrenshidanweiOptions = function () {
  getCategory({
    'bizName': '所属人事单位'
  })
      .then((res) => {
        renshidanweiOptions.value = res.data;
      });
};

//科学研究领域
const kexueyanjiuOptions = ref([]);
const getkexueyanjiuOptions = function () {
  getCategory({
    'bizName': '学科门类（学位）'
  })
      .then((res) => {
        kexueyanjiuOptions.value = res.data;
      });
};

//政治面貌
const zhengzhimianmaoOptions = ref([]);
const getzhengzhimianmaoOptions = function () {
  getCategory({
    'bizName': '政治面貌'
  })
      .then((res) => {
        zhengzhimianmaoOptions.value = res.data;
      });
};

const adddialogFormVisible = function () {
  dialogFormVisible.value = true;
  reset();
  // 每次打开时清空验证状态
  if (ruleFormRef.value) {
    ruleFormRef.value.clearValidate();
  }
};

//重置
const reset = () => {
  for (const key in ruleForm) {
    ruleForm.honorTitleId = [];
    if (Array.isArray(ruleForm[key])) {
      ruleForm[key] = [];
    } else {
      ruleForm[key] = '';
    }
  }
};

watch(dialogFormVisible, (val) => {
  if (val === false && ruleFormRef.value) {
    // 关闭弹窗时清空验证状态
    ruleFormRef.value.clearValidate();
  }
});

const formLabelWidth = '140px';
const formSize = ref('default');
const ruleFormRef = ref();
const ruleForm = reactive({
  submitType: '',
  name: '', //人名
  account: '', //职工号
  sexId: '',//性别
  hrUnitId: '',//人事单位
  unitId: '',//
  titleId: '',//职称
  searchClassId: '',  //科学研究领域.
  searchId: '',//一级学科
  titleRank: '',//职称级别
  eduDegreeId: '',//最后学位
  eduLevelId: '',//最后学历
  personState: '',//在职情况
  isStat: '',//是否统计
  polityId: '',//政治面貌
  honorTitleId: [],//杰出人才
  tutorTypeId: '',//硕导/博导
  nameEn: '',//英文名
  email: '',//电子邮件
  mobile: '',//手机号
  telOffice: '',//办公电话
  birthday: '',//出生年月
  idCard: '',//身份证号
  graduateSchool: '',//毕业院校
  learnSpecialty: '',//教育经历
  experienceAbroad: '',//出国经历
  learning: '',//进修培训情况
  parttime: '',//学术及社会兼职
  researchField: '',//研究方向
});

interface RuleForm {
  submitType: string;
  name: string;
  account: string;
  sexId: string;
  hrUnitId: string;
  unitId: string;
  titleId: string;
  searchClassId: string;
  titleRank: string;
  searchId: string;
  eduDegreeId: string;
  eduLevelId: string;
  personState: string;
  isStat: string;
  polityId: string;
  honorTitleId: [];
  tutorTypeId: string;
  nameEn: string;
  email: string;
  mobile: string;
  telOffice: string;
  birthday: string;
  idCard: string;
  graduateSchool: string;
  learnSpecialty: string;
  experienceAbroad: string;
  learning: string;
  parttime: string;
  researchField: string;
}

const rules = reactive({
  name: [
    { required: true, message: '请填写姓名', trigger: 'blur' },
  ],
  account: [
    { required: true, message: '请填写职工号', trigger: 'blur' },
  ],
  sexId: [
    { required: true, message: '请选择性别', trigger: 'change' },
  ],
  hrUnitId: [
    { required: true, message: '请选择人事单位', trigger: 'change' },
  ],
  unitId: [
    { required: true, message: '请选择所属单位', trigger: 'change' },
  ],
  titleId: [
    { required: true, message: '请选择职称', trigger: 'change' },
  ],
  searchClassId: [
    { required: true, message: '请选择科学研究领域', trigger: 'change' },
  ],
  searchId: [
    { required: true, message: '请选择科学一级学科', trigger: 'change' },
  ],
  titleRank: [
    { required: true, message: '请选择职称级别', trigger: 'change' },
  ],
  eduDegreeId: [
    { required: true, message: '请选择最后学位', trigger: 'change' },
  ],
  eduLevelId: [
    { required: true, message: '请选择最后学历', trigger: 'change' },
  ],
  personState: [
    { required: true, message: '请选择在职情况', trigger: 'change' },
  ],
  isStat: [
    { required: true, message: '请选择统计', trigger: 'change' },
  ],
  email: [
    {
      required: true,
      message: '请输入电子邮箱',
      trigger: 'blur',
    },
    {
      pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
      message: '请输入有效的电子邮箱地址',
      trigger: 'blur',
    },
  ],
  mobile: [
    {
      required: true,
      message: '请输入手机号',
      trigger: 'blur',
    },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入有效的手机号',
      trigger: 'blur',
    },
  ],
});

const getChildlist = ref<any>();
const submitForm = async (formEl, submitType) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      ruleForm.honorTitleId = ruleForm.honorTitleId.join(',');
      ruleForm.submitType = submitType;
      insertPersonList(ruleForm)
          .then((res) => {
            console.log(res);
            if (res.code === 200) {
              ElMessage({
                type: 'success',
                message: res.msg,
              });
              getChildlist.value.fathergeilist();
              dialogFormVisible.value = false;
              // 提交成功后清空验证状态
              if (ruleFormRef.value) {
                ruleFormRef.value.clearValidate();
              }
            } else {
              ElMessage({
                type: 'info',
                message: res.msg,
              });
            }
          });
    } else {
      console.log('error submit!', fields);
    }
  });
};

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
  dialogFormVisible.value = false;
  reset();
  // 关闭弹窗时清空验证状态
  formEl.clearValidate();
};

// 设置头部默认显统计
const ALLs = ref('');
const schooolGo = ref('');
const schooolBack = ref('');
const waiting = ref('');

const init = () => {
  // 可根据需求添加初始化逻辑
};

const getprocessCount = function (Count) {
  // 请求头部条件
  if (Count.checkstatus) {
    activeName.value = Count.checkstatus;
  } else {
    activeName.value = 0;
  }

  Count.checkstatus = '';

  processCount(Count)
      .then((res) => {
        ALLs.value = res.data[0];
        schooolGo.value = res.data[1];
        schooolBack.value = res.data[2];
        waiting.value = res.data[3];
      });
};

init();
onMounted(() => {
  // 请求头部条件
  processCount({})
      .then((res) => {
        ALLs.value = res.data[0];
        schooolGo.value = res.data[1];
        schooolBack.value = res.data[2];
        waiting.value = res.data[3];
      });
});
</script>

<style scoped>
.title-flex {
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.dialog-flex {
  display: flex;
}

.dialog-flex > div {
  width: 50%;
}

/* 新增的样式类 */
.dialog-button-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.demo-tabs{
  border-bottom: 0px;
}
</style>